import color from '../../internal/mixins/color';
import pickerProps from '../mixins/props';
import DateDisplay from './DateDisplay';
import MonthDayView from './MonthDayView';
import YearView from './YearView';
import MonthView from './MonthView';
import * as dateUtils from './dateUtils';
import Button from '../../Button';

let btnText = {
  okText: '确定',
  cancelText: '取消',
};
if (JE.getCookies('je-local-lang') == 'en') {
  btnText = {
    okText: 'Ok',
    cancelText: 'Cancel',
  };
} else {
  btnText = {
    okText: '确定',
    cancelText: '取消',
  };
}

export default {
  name: 'mu-date-picker',
  mixins: [color, pickerProps],
  provide() {
    return {
      getDayButtonSlots: this.getDayButtonSlots,
      getMonthButtonSlots: this.getMonthButtonSlots,
      getYearButtonSlots: this.getYearButtonSlots,
    };
  },
  props: {
    okLabel: {
      type: String,
      default: btnText.okText,
    },
    cancelLabel: {
      type: String,
      default: btnText.cancelText,
    },
    dateTimeFormat: {
      type: Object,
      default() {
        return dateUtils.dateTimeFormat;
      },
    },
    firstDayOfWeek: {
      type: Number,
      default: 0,
    },
    date: {
      type: Date,
      default() {
        return new Date();
      },
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'date', // date, year, month
    },
    maxDate: {
      type: Date,
      default() {
        return dateUtils.addYears(new Date(), 100);
      },
    },
    minDate: {
      type: Date,
      default() {
        return dateUtils.addYears(new Date(), -100);
      },
    },
    shouldDisableDate: Function,
  },
  data() {
    let displayDate = [];
    if (Ext.isArray(this.date)) {
      this.date.forEach((item) => {
        const dd = dateUtils.cloneDate(item);
        displayDate.push(dd);
      });
    } else {
      displayDate = dateUtils.cloneDate(this.date);
    }
    return {
      displayDate,
      view: this.type === 'date' ? 'monthDay' : this.type === 'year' ? 'year' : 'month',
    };
  },
  methods: {
    getDayButtonSlots() {
      return this.$scopedSlots.day;
    },
    getMonthButtonSlots() {
      return this.$scopedSlots.month;
    },
    getYearButtonSlots() {
      return this.$scopedSlots.year;
    },
    handleYearChange(year) {
      let date;
      // 日期选择 增加多选处理
      if (Ext.isArray(this.displayDate)) {
        date = dateUtils.cloneAsDate(this.displayDate[this.displayDate.length - 1]);
      } else {
        date = dateUtils.cloneAsDate(this.displayDate);
      }
      date.setDate(1);
      date.setFullYear(year);
      this.changeDisplayDate(date);
      if (this.type === 'year') {
        this.date = date;
        return this.changeDate();
      }
      this.changeView(this.type === 'month' ? 'month' : 'monthDay');
    },
    handleMonthChange(date) {
      this.changeDisplayDate(date);
      if (this.type === 'month') {
        this.date = date;
        return this.changeDate();
      }
      this.changeView('monthDay');
    },
    handleSelect(date) {
      if (date.getTime() > this.maxDate.getTime()) date = new Date(this.maxDate.getTime());
      if (date.getTime() < this.minDate.getTime()) date = new Date(this.minDate.getTime());
      this.changeDisplayDate(date);
      // 多选情况下 处理选中的date
      const { multiple } = this;
      const dates = Ext.isArray(this.date) ? this.date : [this.date];
      if (multiple) {
        let flag = false;
        for (let i = dates.length; i >= 0; i--) {
          const dt = dates[i];
          if (dateUtils.isEqualDate(date, dt)) {
            // 再次点击 清掉选中
            dates.splice(i, 1);
            flag = true;
          }
        }
        // 如果已选数据没有  则追加
        !flag && dates.push(date);
        this.date = dates;
      } else {
        // 如果是单选 直接传值回去  关闭弹窗
        this.date = date;
        this.changeDate();
      }
    },
    changeDate() {
      this.$emit('change', this.date);
      this.$emit('update:date', Ext.isArray(this.date) ? this.date[this.date.length - 1] : this.date);
    },
    changeDisplayDate(date) {
      const { displayDate, multiple } = this;
      let dates = Ext.isArray(displayDate) ? displayDate : [displayDate];
      if (multiple) {
        let flag = false;
        dates.forEach((item) => {
          if (dateUtils.isEqualDate(date, item)) {
            flag = true;
          }
        });
        !flag && dates.push(date);
      } else {
        dates = date;
      }
      this.displayDate = dates;
    },
    changeView(view) {
      this.view = view;
    },
    // 增加取消按钮
    closePicker() {
      this.$parent.$parent.params.isShow = false;
    },
    createActions(h) {
      if (!this.multiple) return;
      return h('div', {
        staticClass: 'mu-picker-actions',
      }, [h(Button, {
        props: {
          flat: true,
          color: '#386bd0',
        },
        on: {
          click: this.changeDate,
        },
      }, this.okLabel), h(Button, {
        props: {
          flat: true,
          color: '#999',
        },
        on: {
          click: this.closePicker,
        },
      }, this.cancelLabel)]);
    },
  },
  render(h) {
    const colorClass = this.getNormalColorClass(this.color, true);
    const Color = this.getColor(this.color);
    const monthdayView = h(MonthDayView, {
      props: {
        dateTimeFormat: this.dateTimeFormat,
        firstDayOfWeek: this.firstDayOfWeek,
        maxDate: this.maxDate,
        minDate: this.minDate,
        displayDate: this.displayDate,
        selectedDate: this.date,
        shouldDisableDate: this.shouldDisableDate,
      },
      on: {
        changeView: this.changeView,
        select: this.handleSelect,
      },
    });
    const yearView = h(YearView, {
      props: {
        displayDate: this.displayDate,
        maxDate: this.maxDate,
        minDate: this.minDate,
      },
      on: {
        change: this.handleYearChange,
      },
    });
    const monthView = h(MonthView, {
      props: {
        dateTimeFormat: this.dateTimeFormat,
        maxDate: this.maxDate,
        minDate: this.minDate,
        displayDate: this.displayDate,
      },
      on: {
        changeView: this.changeView,
        change: this.handleMonthChange,
      },
    });
    return h(
      'div',
      {
        staticClass: `mu-picker mu-datepicker ${colorClass}`,
        class: {
          'mu-picker-landspace': this.landscape,
        },
        style: {
          Color,
        },
      },
      [
        !this.noDisplay ? h(DateDisplay, {
          props: {
            type: this.type,
            monthDaySelected: this.view !== 'year',
            color: this.displayColor,
            displayDate: this.displayDate,
            dateTimeFormat: this.dateTimeFormat,
          },
          on: {
            changeView: this.changeView,
          },
        }) : undefined,
        h(
          'div', { staticClass: 'mu-picker-container' },
          [
            this.view === 'monthDay' ? monthdayView : this.view === 'month' ? monthView : yearView,
            this.$slots.default,
            this.createActions(h),
          ],
        ),
      ],
    );
  },
  watch: {
    date(val) {
      // 增加多选判断  防止每次切换年月  默认选中当月1号
      if (!this.multiple) {
        this.displayDate = val;
      }
    },
  },
};
